<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table {
				border: #FFA500 solid 1px;
				width: 600px;
				border-collapse: collapse;
			}

			table th {
				border-bottom: #FFA500 solid 1px;
				background-color: antiquewhite;
				padding: 10px;
			}

			table td {
				border: #FFA500 solid 1px;
				padding: 10px;
			}

			.cur {
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th><input type="checkbox" name="checkall" /></th>
				<th>用户ID</th>
				<th>用户名称</th>
				<th>部门</th>
				<th>手机</th>
			</tr>
			<tr>
				<td><input type="checkbox" name="check" /></td>
				<td>1</td>
				<td>zhangsan</td>
				<td>研发部门</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check" /></td>
				<td>2</td>
				<td>zhangsan</td>
				<td>研发部门</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check" /></td>
				<td>3</td>
				<td>zhangsan</td>
				<td>研发部门</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="check" /></td>
				<td>4</td>
				<td>zhangsan</td>
				<td>研发部门</td>
				<td>15999999999</td>
			</tr>
			<tr>
				<td colspan="5"><button>删除</button></td>
			</tr>
		</table>
		<script type="text/javascript">
			var table = document.querySelector("table");
			var trs = table.rows;
			trs = Array.from(trs);
			trs.forEach(function(tr) {
				tr.addEventListener("mouseover", function(val) {
					this.className = "cur";
				});
				tr.addEventListener("mouseout", function(val) {
					this.className = "";
				})
			})

			var checkall = document.querySelector("input");
			checkall.addEventListener("click", function() {
				var check = document.querySelectorAll("input");
				check.forEach(function(val) {
					val.checked = checkall.checked;
				})
			})

			var button = document.querySelector("button");
			button.addEventListener("click", function() {
				//获取所有的checkbox
				var checkbox = document.querySelectorAll("input");
				checkbox.forEach(function(val) {
					//val是input
					if (val.checked) {
						//tr对象
						var tr = val.parentNode.parentNode;
						var table = tr.parentNode;
						table.removeChild(tr);
					}
				})
			})
		</script>
	</body>
</html>
